<template>
  <!-- home页面 -->
  <div class="home-container">
    <!-- 顶部导航栏 @click-right="toSearch" Vant官网的点击事件 -->
    <van-nav-bar fixed @click-right="toSearch">
      <template #left>
        <div class="logo"></div>
      </template>
      <!-- 内部具名插槽 -->
      <template #right>
        <van-button round class="search-btn" size="small" icon="search"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 横向滑动条 -->
    <!-- 内容 -->
    <van-tabs v-model="active">
      <!-- 频道布局 -->
      <!-- 遍历 获取频道列表的数据 后端,前端,人工智能等... -->
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <!-- 注意,不能省略 : 省略了:就是字符串,那么articleList子组件就接收不到这个id -->
        <!-- 子组件定义的 props: ['channelId'] 和methods是兄弟关系,然后有父组件这里传值 -->
        <articleList :channelId="item.id"></articleList>
        <!-- <div v-for="v in 50" :key="v">内容 {{ item }}---{{ v }}</div> -->
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 6月27号----------------------6月27号---------------
// 导入api里面的home.js工具函数(获取频道列表的接口)
import { getChannels } from '../../api/home.js'
// 导入hoem/articleList.vue子组件 记得注册
import articleList from './articleList.vue'
export default {
  name: 'home',
  data () {
    return {
      active: 0,
      // 存储 获取频道列表
      channels: []
    }
  },
  components: {
    articleList: articleList
  },
  methods: {
    // 点击去搜索页面
    toSearch () {
      this.$router.push({ path: '/search' })
    }
  },
  // 这种写法和下面的效果一样 (注意 await 才可以 .then 获取到结果 async和await必须一起写)
  async created () {
    const res = await getChannels()
    // console.log('res', res)
    this.channels = res.data.data.channels
  }
  // created () {
  //   getChannels().then(res => {
  //     console.log('res', res)
  //     this.channels = res.data.data.channels
  //   })
  // }
}
</script>

<style lang="less">
.home-container {
  height: 100vh;
  padding-top: 46px;
  padding-bottom: 50px;
  overflow: hidden;
  .van-nav-bar {
    background-color: #3296fa;
  }

  .van-tabs {
    height: 100%;
    padding-top: 44px;
    // tab栏标题
    .van-tabs__wrap {
      position: fixed;
      left: 0;
      right: 30px;
      top: 46px;
    }
    .van-tabs__content {
      overflow-y: scroll;
      height: 100%;
    }
  }
  .van-tab {
    padding: 0 16px;
  }
  .van-tabs__line {
    background-color: #3196fa;
  }
  // logo区域
  .logo {
    background: url('../../assets/logo (2).png') no-repeat;
    background-size: cover;
    width: 100px;
    height: 30px;
  }
  // 搜索按钮
  .search-btn {
    background-color: #5babfb;
    width: 100px;
    font-size: 14px;
    border: none;
    .van-icon {
      color: #fff;
    }
    .van-button__text {
      color: #fff;
    }
  }
}
</style>
